<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【针对表格和行内元素】</title>
		<!-- 垂直方向对象属性   vertical-align
		     使用方法: 1.用于表格中单元格垂直居中
			          2.用于行内元素以及行内块元素的垂直居中
					  【文本和图片垂直居中（对齐）效果】
					  对齐分为四种: 基线对齐、顶部对齐、
					               居中对齐、底部对齐
					  元素种类: 块元素、行元素、行内块元素
					      1.块元素特点: 独占一行、设置宽高
						  2.行元素特点: 可以在一行内显示、不设置宽高
						  网页: 元素之间嵌套生成
						  行元素与块元素可以任意嵌套
						  前提: 设置宽高----行套块   √
						               ----块套块   √
									   ----块套行   √
						  前提: 一行内显示----行套块    √  【通常情况下】
									     ----块套块    ×
										 ----块套行    √
										 ----行套行    √
						  -->
		<style>
		 i mg:nth-child(1){
			/*  vertical-align: baseline   默认基线对齐  */
			vertical-align: baseline;
		}
		/*  问题: 派生选择器，特点: 找后代   p   img  */
		 i mg:nth-child(2){
			/*  vertical-align:  顶部对齐  */
			vertical-align: top;
			width: 500px;
			height: 500px;
			background: red;
		}
		
	    img.baseline{
			vertical-align: baseline;
		}
		.top{
			vertical-align: top;
		}
		.middle{
			vertical-align: middle;
		}
		.bottom{
			vertical-align: bottom;
		}
		</style>
	</head>
	<body>
		<!-- 需求结构:  4个段落p、嵌套文字:  图片名称
		                         文字后加img，设定宽高: 25~100px
								 每个图片加: ①基线对齐、②顶部对齐、③居中对齐、④底部对齐
								 -->
		<h1>文本与图片的垂直属性</h1>						 
		<p>文本<img src="" alt="文本">基线对齐</p>
								 
		<p>敖闰<img class="baseline" src="img/1.png" alt="敖闰" width="200px" height="200px">基线对齐</p>
		<p>敖丙<img  class="top" src="img/2.png" alt="敖丙" width="200px" height="200px">顶部对齐</p>
		<p>哪吒<img class="middle" src="img/3..png" alt="哪吒" width="200px" height="200px">居中对齐</p>
		<p>申公豹<img class="bottom" src="img/4.png" alt="申公豹" width="200px" height="200px">底部对齐</p>
		<!-- css选择器---抓取第一张图片       
		   思路:  派生选择器: 找后代 +伪类选择器: 添加效果[错误]
		   错误原因: html结构不符合派生特点: p 包含4个img
		           伪类选择器，4个img需要再一个p中
		   p img:nth-child(1 2 3 ....)
			-->
		
	</body>
</html>